<template>
  <PageWrapper title="门店信息" contentBackground contentClass="p-4">
    <BasicForm @register="registerForm" @submit="handleSubmit" />
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, nextTick, onMounted, reactive, toRaw } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { shopFormSchema } from './Index.data';
  import { PageWrapper } from '/@/components/Page';
  import { getById, updateById } from '/@/api/restaurant/shop';
  import { useLoading } from '/@/components/Loading';

  export default defineComponent({
    name: 'Index',
    components: { PageWrapper, BasicForm },
    setup() {
      onMounted(() => {
        fetch({ id: 1111 });
      });

      async function fetch(params: object) {
        let shopValue = await getById(params);

        Object.assign(shop, shopValue);
        let value = toRaw(shop);

        await nextTick(() => {
          setFieldsValue(value);
        });
      }
      const shop = reactive({});

      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
        schemas: shopFormSchema,
        showResetButton: false,
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 10,
        },
        actionColOptions: {
          offset: 8,
          span: 12,
        },
        submitButtonOptions: {
          text: '更新信息',
        },
      });

      const [openWrapLoading, closeWrapLoading] = useLoading({
        props: {
          tip: '加载中...',
          absolute: true,
        },
      });

      async function handleSubmit(values: any) {
        try {
          openWrapLoading();
          console.log(values);
          const { id } = shop;
          await updateById({ id, ...values });
          closeWrapLoading();
        } finally {
        }
      }
      return {
        registerForm,
        shopFormSchema,
        handleSubmit,
      };
    },
  });
</script>

<style scoped></style>
